<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
	<title>首页</title>
	<link rel="stylesheet" href="../css/index.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/index.js"></script>
</head>
<body>
<div id="dataContainer" class="dataContainer">
	<div class="head">
		<div class="category">
			<div class="title">平台分类</div>
			<div class="item">
				<a href="#">单机游戏</a>
			</div>
		</div>
		<div class="category">
			<div class="title">攻略分类</div>
			<div class="item">
				<a href="#" onclick="updatePage(null)">全部</a>
				<div class="item">
					<c:forEach items="${option}" var="strategy">
						<a href="#" onclick="updatePage('${strategy.id}')">${strategy.value}</a>
						<input type="hidden" id="strategyId" value="${strategy.id}">
					</c:forEach>
				</div>
			</div>
		</div>
		<div class="category">
			<div class="title">热门搜索</div>
			<div class="item">
				<a href="#">塞尔达.旷野之息</a>
				<a href="#">塞尔达.王国之泪</a>
				<a href="#">星露谷</a>
			</div>
			<div class="search">
				<form action="#">
					<div>
						<img src="../static/icon/放大镜.png">
						<input type="text" id="searchInput" placeholder="请输入需要搜索的内容">
						<button type="submit" onclick="search()">搜索</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="body1">
		<div id="page1" class="container" id="data-container">
			<c:forEach items="${list}" var="item">
				<div class="element">
					<a href="/guide/${item.name}">
						<p>${item.name}</p>
						<img src="${item.address}">
					</a>
				</div>
			</c:forEach>
		</div>
	</div>
	<div class="pagination">
		<button class="pagination-item" id="firstPageBtn" onclick="firstPageBtn()">首页</button>
		<button class="pagination-item" id="prevBtn" onclick="prevBtn()">上一页</button>
		<div class="pagination-item" id="currentPage">1</div>
		<div class="pagination-item" id="totalCount">总页数: ${totalPages}<input type="hidden" id="pageNum" value="${totalPages}"></div>
		<button class="pagination-item" id="nextBtn" onclick="nextBtn()">下一页</button>
		<button class="pagination-item" id="lastPageBtn" onclick="lastPageBtn()">尾页</button>
	</div>
</div>
</body>
</html>